import React from 'react';
import {NavLink} from 'react-router-dom';
import './index.scss';
import {SearchBar} from 'antd-mobile';
import {connect} from 'react-redux';
import actions from '../../store/modules/search/actions';

class Search extends React.Component {
  render() {
    return (
      <div className="page_search">
        <div className='g-hd'>
          <div className='log'>多看阅读</div>
          <div className='act'>
            <NavLink to="/login">
              <div className='m-login iconfont icon-geren'></div>
            </NavLink>
            <NavLink to="/home">
              <div className='m-search iconfont icon-cuo'></div>
            </NavLink>
          </div>
        </div>

        <SearchBar 
          value={this.props.searchVal}
          placeholder="输入书名或作者..." 
          onChange={this.props.handleChange}
        >
        </SearchBar>

        {
          this.props.searchVal ? (
              this.props.searchList.length > 0 ? (
                <div className='m-category-list'>
                  <ul className='u-list-col1'>
                      {
                          this.props.searchList.map(item => (
                              <li key={item.bookId}>
                                  <NavLink to={`/detail/${item.bookId}`}>
                                      <span className='cover'><img src={item.bookImg} /></span>
                                      <div className='info'>
                                          <h3>{item.bookName}</h3>
                                          <p className='author'>
                                              <span>{item.author}</span>
                                          </p>
                                          <p className="summary">{item.summary}</p>
                                      </div>
                                  </NavLink>
                              </li>
                          ))
                      }
                  </ul>
                </div> 
              ) : (
                <div className='m-searchlist'>
                  <ul className='u-list-col1'>
                    <div className='u-load'>
                      <span>没搜到，继续搜~</span>
                    </div>
                  </ul>
                </div>
              )
          ) : (
            <div className="hotsearch">
              <h4>大家都在搜...</h4>
              <ul className="u-list-col1">
                <li>
                  <a href="javascript:void(0)" ref='searchName1' hidefocus="hidefocus" onClick={() => {this.props.handleClick(this.refs.searchName1)}}>你和我的倾城时光（全集）</a>
                </li>
                <li>
                  <a href="javascript:void(0)" ref='searchName2' hidefocus="hidefocus" onClick={() => {this.props.handleClick(this.refs.searchName2)}}>将夜（全集）</a>
                </li>
                <li>
                  <a href="javascript:void(0)" ref='searchName3' hidefocus="hidefocus" onClick={() => {this.props.handleClick(this.refs.searchName3)}}>原来你还在这里（全二册）</a>
                </li>
                <li>
                  <a href="javascript:void(0)" ref='searchName4' hidefocus="hidefocus" onClick={() => {this.props.handleClick(this.refs.searchName4)}}>创业时代</a>
                </li>
                <li>
                  <a href="javascript:void(0)" ref='searchName5' hidefocus="hidefocus" onClick={() => {this.props.handleClick(this.refs.searchName5)}}>凉生，我们可不可以不忧伤（全五册）</a>
                </li>
              </ul>
            </div>
          )
        }


        <div className="g-ft">
          <div className="m-cprt">
            <p>
              <a href="#" target="_blank">多看客户端</a>
              <span>|</span>
              <a href="#" target="_blank">电脑版</a>
            </p>
            <p>Copyright&copy;duokan.com</p>
          </div>
        </div>
        
      </div>
    );
  }
};

export default connect(
  state => {
    return {
      searchVal: state.search.searchVal,
      searchList: state.search.searchList
    }
  },
  dispatch => {
    return {
      handleChange: (value) => {
        // console.log(value);
        dispatch(actions.getSearchListAct(value));
      },
      handleClick: (ele) => {
        // console.log(ele.innerHTML);
        dispatch(actions.getSearchListAct(ele.innerHTML));
      }
    }
  }
)(Search);
